<template>
  <view class="container">
    <!-- 错题统计 -->
    <view class="stats-section">
      <view class="stats-item">
        <text class="stats-label">错题数量</text>
        <text class="stats-value">{{ wrongQuestions.length }}</text>
      </view>
      <view class="stats-item">
        <text class="stats-label">待复习</text>
        <text class="stats-value">{{ unreviewedCount }}</text>
      </view>
    </view>

    <!-- 错题列表 -->
    <scroll-view class="question-list" scroll-y>
      <view v-for="(item, index) in wrongQuestions" :key="item.id" class="question-item" @click="goToDetail(item)">
        <view class="question-title">
          <text class="question-index">{{ index + 1 }}.</text>
          <text class="title-text">{{ item.title }}</text>
        </view>
        <image v-if="item.titlePic" :src="item.titlePic" mode="aspectFit" class="question-image"></image>
        <view class="options-list">
          <view class="option-item" v-if="item.op1">{{ item.op1 }}</view>
          <view class="option-item" v-if="item.op2">{{ item.op2 }}</view>
          <view class="option-item" v-if="item.op3">{{ item.op3 }}</view>
          <view class="option-item" v-if="item.op4">{{ item.op4 }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wrongQuestions: [],
      unreviewedCount: 0,
      rankList: [],
      typeList: [],
      rankIndex: 0,
      typeIndex: 0
    }
  },
  onShow() {
    this.loadWrongQuestions()
  },
  methods: {
    loadWrongQuestions() {
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      if (prevPage) {
        const currentRank = prevPage.$vm.rankList[prevPage.$vm.rankIndex].id
        const currentType = prevPage.$vm.typeList[prevPage.$vm.typeIndex].id
        const storageKey = `wrongQuestions_${currentRank}_${currentType}`
        
        const wrongQuestionsData = uni.getStorageSync(storageKey) || []
        this.wrongQuestions = wrongQuestionsData
        this.unreviewedCount = wrongQuestionsData.filter(q => !q.reviewed).length
      }
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${item.id}&from=wrong&rank=${this.rankList[this.rankIndex].id}&type=${this.typeList[this.typeIndex].id}`
      })
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.stats-section {
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.stats-item {
  text-align: center;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.stats-value {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.question-list {
  height: calc(100vh - 140rpx);
}

.question-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.question-title {
  display: flex;
  margin-bottom: 20rpx;
}

.question-index {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.title-text {
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
}

.question-image {
  width: 100%;
  height: 300rpx;
  margin: 20rpx 0;
}

.options-list {
  margin-top: 20rpx;
}

.option-item {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  padding: 10rpx 0;
}
</style>